<template>
  <div class="beauty-page">
    <!-- 搜索栏 -->
    <van-search v-model="searchValue" placeholder="护肤品" @search="handleSearch" />
    <!-- 分类标签 -->
    <van-tabs v-model:active="activeTab">
      <van-tab title="种草">共 {{ postList.length }} 条</van-tab>
      <van-tab title="商品" />
      <van-tab title="话题" />
      <van-tab title="用户" />
    </van-tabs>
    <!-- 调试信息 -->
    <pre v-if="debugMode">{{ postList }}</pre>
    <!-- 内容展示 -->
    <div v-if="activeTab === '种草'" class="post-list">
      <div v-for="(post, index) in filteredPostList" :key="index" class="post-item" @click="handlePostClick(post)">
        <img 
          :src="post.image" 
          :srcset="getSrcSet(post.image)" 
          alt="post image" 
          class="post-image" 
          @error="handleImageError($event, post)"
        />
        <div class="post-content">
          <p class="post-text">{{ post.text }}</p>
          <div class="user-info">
            <img 
              :src="post.userAvatar" 
              :srcset="getSrcSet(post.userAvatar)" 
              alt="user avatar" 
              class="user-avatar" 
              @error="handleAvatarError($event, post)"
            />
            <span class="user-name">{{ post.userName }}</span>
            <span class="like-count">
              <van-icon name="heart" />
              {{ post.likeCount }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- 加载更多按钮 -->
    <van-button v-if="hasMore && postList.length > 0" @click="loadMore">加载更多</van-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Toast } from 'vant';

// 搜索栏的值
const searchValue = ref('');
// 当前激活的标签
const activeTab = ref('种草');
// 模拟帖子列表数据
const postList = ref([
  {
    id: 1,
    image: '../../src/assets/18.png',
    text: '晚霜自用总结，都是最真实的使用感受。',
    userAvatar: '../../src/assets/18.png',
    userName: '千语',
    likeCount: 1001
  },
  {
    id: 2,
    image: '../../src/assets/20.png',
    text: '晚霜自用总结，都是最真实的使用感受。',
    userAvatar: '../../src/assets/20.png',
    userName: '千语',
    likeCount: 1002
  },
  {
    id: 3,
    image: '../../src/assets/21.png',
    text: '晚霜自用总结，都是最真实的使用感受。',
    userAvatar: '../../src/assets/21.png',
    userName: '千语',
    likeCount: 1003
  },
  {
    id: 4,
    image: '../../src/assets/22.png',
    text: '晚霜自用总结，都是最真实的使用感受。',
    userAvatar: '../../src/assets/22.png',
    userName: '千语',
    likeCount: 1004
  }
]);
// 每页显示的数量
const pageSize = ref(4);
// 当前页码
const currentPage = ref(1);
// 是否还有更多数据
const hasMore = computed(() => postList.value.length > currentPage.value * pageSize.value);
// 过滤后的帖子列表
const filteredPostList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return postList.value.slice(start, end).filter(post => 
    post.text.includes(searchValue.value) || post.userName.includes(searchValue.value)
  );
});
// 调试模式
const debugMode = ref(false);

// 处理搜索事件
const handleSearch = () => {
  currentPage.value = 1;
};

// 处理图片加载错误
const handleImageError = (event, post) => {
  event.target.src = 'https://via.placeholder.com/200x300?text=Image+Not+Found';
};

// 处理头像加载错误
const handleAvatarError = (event, post) => {
  event.target.src = 'https://via.placeholder.com/24x24?text=Avatar+Not+Found';
};

// 处理帖子点击事件
const handlePostClick = (post) => {
  Toast(`点击了帖子：${post.id}`);
};

// 加载更多数据
const loadMore = () => {
  currentPage.value++;
};

// 获取srcset属性
const getSrcSet = (src) => {
  return `${src} 1x, ${src.replace('200', '400')} 2x`;
};
</script>

<style scoped>
.beauty-page {
  padding: 16px;
}
.post-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  animation: fadeIn 0.5s ease-in-out;
}
.post-item {
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
}
.post-item:hover {
  transform: scale(1.02);
}
.post-image {
  width: 100%;
  height: auto;
}
.post-content {
  padding: 16px;
}
.post-text {
  margin-bottom: 8px;
  color: #333;
}
.user-info {
  display: flex;
  align-items: center;
}
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}
.like-count {
  margin-left: auto;
  color: #999;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>    